<template>
    <div class="virtualButtonContainer">
        <template v-if="props.isEdit">
            <div class="save" @click="editEnd">SAVE</div>

            <div class="from flex items-center justify-between" v-if="changeButtonIndex > -1">
                <div class="label">按钮大小</div>
                <input @input="handleChangeSize" :value="buttonList[changeButtonIndex].size" :min="1" :max="40" class="range" type="range" />
                <div class="val">{{ buttonList[changeButtonIndex].size }}</div>
            </div>

            <div
                class="item flex items-center justify-center"
                v-for="(item, index) in buttonList"
                :key="item.action"
                :style="{
                    left: item.position.x + '%',
                    top: item.position.y + '%',
                    height: (item.size || 20) + 'vmin',
                    width: (item.size || 20) + 'vmin',
                }"
                @touchstart="(e) => handleMouseDown(index)"
                @touchend="(e) => handleMouseUp(item.action, e)"
                @touchmove="(e) => handleMouseMove(item.action, e)"
            >
                <svg v-if="item.action == 'left'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                    <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                </svg>

                <svg v-if="item.action == 'right'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" />
                    <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" />
                </svg>

                <svg v-if="item.action == 'hardDown'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                    <path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                </svg>

                <svg v-if="item.action == 'softDown'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                </svg>

                <svg v-if="item.action == 'hold'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
                    <path
                        d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"
                    />
                    <path
                        fill-rule="evenodd"
                        d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"
                    />
                </svg>

                <svg v-if="item.action == 'rotate'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                </svg>

                <svg v-if="item.action == 'rotateBack'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
                    <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
                </svg>
            </div>
        </template>

        <template v-else>
            <div
                class="item flex items-center justify-center"
                v-for="item in buttonList"
                :key="item.action"
                :style="{
                    left: item.position.x + '%',
                    top: item.position.y + '%',
                    height: (item.size || 20) + 'vmin',
                    width: (item.size || 20) + 'vmin',
                }"
                @touchstart="handleClick(item.action)"
                @touchend="handleClickEnd(item.action)"
            >
                <svg v-if="item.action == 'left'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-double-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                    <path fill-rule="evenodd" d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
                </svg>

                <svg v-if="item.action == 'right'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-double-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z" />
                    <path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z" />
                </svg>

                <svg v-if="item.action == 'hardDown'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                    <path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                </svg>

                <svg v-if="item.action == 'softDown'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-chevron-down" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                </svg>

                <svg v-if="item.action == 'hold'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
                    <path
                        d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"
                    />
                    <path
                        fill-rule="evenodd"
                        d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"
                    />
                </svg>

                <svg v-if="item.action == 'rotate'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
                    <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                </svg>

                <svg v-if="item.action == 'rotateBack'" xmlns="http://www.w3.org/2000/svg" fill="#eee" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
                    <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
                </svg>
            </div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue"
import { getVirtualButtonConfig, setVirtualButtonConfig } from "@/utils/config"
import { useWindowSize } from "@vueuse/core"
const { height, width } = useWindowSize()
import { useRouter } from "vue-router"
const router = useRouter()
import useAppStore from "@/pinia"
const app = useAppStore() // pinia实例

const props = defineProps({
    isEdit: {
        type: Boolean,
        default: false,
    },
})

let buttonList = ref(getVirtualButtonConfig())
let changeButtonIndex = ref(-1)
let touching = ref(false)

const handleClick = (actionName: string) => {
    console.log("app.keyBoardBase", app.keyBoardBase)
    if (app.keyBoardBase) {
        if (actionName == "hardDown") app.keyBoardBase.action.actionHardDown()
        if (actionName == "left") app.keyBoardBase.action.actionLeft()
        if (actionName == "right") app.keyBoardBase.action.actionRight()
        if (actionName == "softDown") app.keyBoardBase.action.actionSortDown()
        if (actionName == "hold") app.keyBoardBase.action.actionHold()
        if (actionName == "rotate") app.keyBoardBase.action.actionSpin()
        if (actionName == "rotateBack") app.keyBoardBase.action.actionSpinBack()
    }
}

const handleClickEnd = (actionName: string) => {
    if (app.keyBoardBase) {
        if (actionName == "hardDown") app.keyBoardBase.action.actionHardDownEnd()
        if (actionName == "left") app.keyBoardBase.action.actionLeftEnd()
        if (actionName == "right") app.keyBoardBase.action.actionRightEnd()
        if (actionName == "softDown") app.keyBoardBase.action.actionSortDownEnd()
        if (actionName == "hold") app.keyBoardBase.action.actionHoldEnd()
        if (actionName == "rotate") app.keyBoardBase.action.actionSpinEnd()
        if (actionName == "rotateBack") app.keyBoardBase.action.actionSpinBackEnd()
    }
}

const handleMouseDown = (index: number) => {
    touching.value = true
    changeButtonIndex.value = index
}

// 拖拽结束 保存当前键位位置
const handleMouseUp = () => {
    touching.value = false
    setVirtualButtonConfig(buttonList.value)
}

// 键位位置移动
const handleMouseMove = (action: string, e: any) => {
    if (!touching.value) return
    let x = e.targetTouches[0].clientX
    let y = e.targetTouches[0].clientY
    let index = buttonList.value.findIndex((item: any) => item.action == action)
    let position = {
        x: 0,
        y: 0,
    }
    position.x = (x / width.value) * 100
    position.y = (y / height.value) * 100
    position.x = Math.round(position.x)
    position.y = Math.round(position.y)
    buttonList.value[index].position = position
}

const handleChangeSize = (e: any) => {
    let val = e.target.value
    buttonList.value[changeButtonIndex.value].size = val
    setVirtualButtonConfig(buttonList.value)
}

const editEnd = () => {
    // 保存设置后 返回设置页面
    router.back()
}
</script>

<style lang="scss" scoped>
.virtualButtonContainer {
    width: 100%;
    height: 100%;
    position: relative;

    .item {
        position: absolute;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        transition: background-color 0.2s;
        background-color: rgba($color: #000000, $alpha: 0.4);
        box-shadow: 0px 0px 3vmin #1f4c65;

        &:active {
            background-color: rgba($color: #000000, $alpha: 0.2);
        }

        svg {
            width: 60%;
            height: 60%;
        }
    }

    .save {
        position: absolute;
        right: 6vmin;
        top: 6vmin;
        padding: 3vmin 6vmin;
        border-radius: 2vmin;
        background-color: rgba($color: #000000, $alpha: 0.4);
        box-shadow: 0px 0px 3vmin #1f4c65;
        color: rgb(234, 234, 234);
        letter-spacing: 0.2vmin;
    }

    .from {
        position: absolute;
        left: 50%;
        top: 6vmin;
        transform: translate(-50%, 0);
        width: 70vmin;

        .range {
            flex: 1;
            -webkit-appearance: none;
            height: 2vmin;
            background: #e4e7ed;
            box-shadow: 0px 0px 0.5vmin 0.5vmin rgb(0, 0, 0, 0.1) inset;
            outline: none;
            opacity: 0.7;
            -webkit-transition: 0.2s;
            transition: opacity 0.2s;
            border-radius: 1vmin;
            cursor: pointer;
            &::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 0;
                min-width: 6vmin;
                height: 4vmin;
                background: rgb(72, 101, 146, 0.8);
                box-shadow: 1px 1px 0.5vmin 1vmin rgb(0, 0, 0, 0.1);
                cursor: pointer;
                border-radius: 0.5vmin;
                transition: all 0.3s;
                &:hover {
                    min-width: 12vmin;
                    background: rgb(56, 82, 122);
                    border-radius: 1vmin;
                }
            }
        }

        .label {
            min-width: 25vmin;
            flex-shrink: 0;
            color: #d7e3f6;
            font-weight: 600;
            font-size: 3vmin;
        }

        .val {
            min-width: 8vmin;
            flex-shrink: 0;
            text-align: center;
            color: #d7e3f6;
            font-weight: 400;
            font-size: 4vmin;
            margin-left: 2vmin;
        }
    }
}
</style>
